<template>
    <div class="flex">
        <Tree
            :title="treeTitle"
            :treeData="treeData"
            checkable
            @selectTree="onSelectTree"
            @handleStartUp="onStartUp"
        />
        <div class="table" style="width: 100%">
            <Search :formState="formState" @searchData="onSearchList" />
            <a-card>
                <TableTools @onRefresh="onRefresh" />
                <a-table
                    :pagination="{
                        onChange: onPageChange,
                        pageSize: formState.pageSize,
                        total: total,
                        showTotal: (total) => `共${total}条记录`,
                        size: 'middle',
                    }"
                    :rowKey="(record) => record.id"
                    :columns="columns"
                    :data-source="repositories"
                    size="middle"
                    :loading="tableLoading"
                >
                    <template #yxsl="{ record }">
                        {{ record.total - record.yxsl }}
                    </template>
                    <template #type="{ record }">
                        {{ record.type === "1" ? "时间字段" : "空间字段" }}
                    </template>
                    <template #yxl="{ record }">
                        {{ 100 - Number.parseFloat(record.yxl) }}%
                    </template>
                </a-table>
            </a-card>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted } from "vue";
import useRepositoryNameSearch from "./useRepositoryNameSearch";
import initTreeData from "./initTreeData";
import Tree from "@/components/tree/TreeG.vue";
import Search from "./components/search.vue";
import TableTools from "./components/tableTools.vue";
import { message } from "ant-design-vue";
import { countApi } from "@/api/data-quality";
interface FormState {
    sjdxid: string;
    zdmc: string;
    pageSize: number;
    pageNum: number;
    orderByColumn: string;
    isAsc: string;
}
interface Store {
    tableLoading: boolean;
    treeTitle: string;
    onSearchList: (formState: FormState) => void;
    onPageChange: (currentPage: number) => void;
    onSelectTree: (id: string) => void;
    onRefresh: () => void;
    onStartUp: (ids: string[]) => void;
}
export default defineComponent({
    name: "DataQuality",
    setup() {
        const formState = reactive<FormState>({
            sjdxid: "",
            zdmc: "",
            pageSize: 10,
            pageNum: 1,
            orderByColumn: "",
            isAsc: "asc",
        });
        const columns = [
            { title: "字段名称", dataIndex: "zdmc", key: "zdmc" },
            { title: "字段类型", slots: { customRender: "type" }, key: "type" },
            { title: "数据总量", dataIndex: "total", key: "total" },
            {
                title: "空值量",
                dataIndex: "yxsl",
                key: "yxsl",
                slots: { customRender: "yxsl" },
            },
            {
                title: "空值占比",
                dataIndex: "yxl",
                key: "yxl",
                slots: { customRender: "yxl" },
            },
        ];
        const {
            total,
            repositories,
            getUserRepositories,
        } = useRepositoryNameSearch(formState);
        const { getTreeData, treeData } = initTreeData();
        onMounted(() => {
            getUserRepositories();
            getTreeData();
        });
        const store = reactive<Store>({
            tableLoading: false,
            treeTitle: "数据质量监控",
            onSearchList(formState) {
                store.tableLoading = true;
                formState = formState;
                getUserRepositories().then(() => {
                    store.tableLoading = false;
                });
            },
            onPageChange(currentPage) {
                store.tableLoading = true;
                formState.pageNum = currentPage;
                getUserRepositories().then(() => {
                    store.tableLoading = false;
                });
            },
            onSelectTree(id) {
                formState.sjdxid = id;
                getUserRepositories();
            },
            async onStartUp(ids) {
                if (ids.length === 0) {
                    message.info("请选择启动项！");
                } else {
                    for (const s of ids) {
                        await countApi(s).then(({ msg }: any) => {
                            message.success(msg);
                        });
                    }
                }
            },
            onRefresh() {
                getUserRepositories().then(() => {
                    message.success("刷新成功");
                });
            },
        });

        return {
            total,
            formState,
            repositories,
            columns,
            ...toRefs(store),
            treeData,
        };
    },
    components: {
        Search,
        Tree,
        TableTools,
    },
});
</script>